import React from 'react';
import styles from './style.css'
import {getHistory} from "../../util/uitls";
import pageRedux from '../pageRedux'
import MyLayout from '../../component/MyLayout';
import {getStoreUtil, setStoreUtil} from "../../util/store";
import MyPicker from "../../component/MyPicker";
import {getGentleTitle} from "./utils";
import {Range} from 'antd-mobile'
import {getLocal} from "../../util/local";

export class HomeFilter extends React.Component {
    constructor(props) {
        super()
        this.state = {
            generID: getLocal("app.filter_generID"),
            genderData: [
                {
                    label: '男',
                    value: '1',
                },
                {
                    label: '女',
                    value: '2',
                },
            ],
            filter_range: getLocal("app.filter_range")||props.getStore("app.filter_range")
        }
    }

    componentDidMount() {

    }


    rangChnage(value) {
        this.setState({filter_range: value})
        this.props.setStore("app.filter_range", value)
    }

    render() {
        var self = this
        var filter_range = this.state.filter_range
        return <MyLayout title="过滤条件">
            <div>
                <MyPicker data={this.state.genderData}
                          value={this.state.generID}
                          cols={1}
                          onCancel={(e) => {
                              self.setState({generID: e})
                              self.props.setStore("app.filter_generID", e)
                          }}
                          onOk={(e) => {
                              self.setState({generID: e})
                              self.props.setStore("app.filter_generID", e)
                          }}
                >
                    <div className={styles.formItem}>
                        性别：{getGentleTitle(this.state.generID)}</div>
                </MyPicker>

                <div>
                    <div className={styles.formItem}>
                        <span>距离(公里)：{filter_range && filter_range.toString()}</span>
                    </div>
                    <Range
                        step={1}
                        style={{marginLeft: 30, marginRight: 30, marginTop: 20}}
                        min={0}
                        max={100}
                        defaultValue={filter_range}
                        onChange={this.rangChnage.bind(this)}
                    ></Range>

                </div>
            </div>
        </MyLayout>
    }
}


export default pageRedux(HomeFilter)